<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <p>{{a}}</p>

        <!-- p.innnerText = b -->

        <!-- 指令的值一般是一个javascrpt表达式 (运算符或操作数(变量或常量组成的式子)) -->
        <p v-text="b">1111</p>
        <p v-text="'3'"></p>
        <p v-text="2+2"></p>
        <p v-text="true"></p>
        <p v-text="null"></p>
        <p v-text="[1,2,3]"></p>

        <button @click="b++">点击</button>
    </div>
</body>
<script>
    // 模板语法 

    // 插值
    // 文本插值  {{}}    

    // 指令:
    // v-text
    // v-html
    // v-pre
    // v-if   v-else-if   v-else   条件渲染
    // v-show    条件展示 




    var vm = new Vue({
        el: "#app",
        data: {
            a: 1,
            b: 2,
        },
        methods: {
            addA: function () {
                this.a++;
            },
            addB() {
                this.b++;
            }
        },
        computed: {

        },
        watch: {

        }
    })

    console.log(vm);
    vm.$data.a++
    // console.log(vm.$data.a);
    console.log(vm.a);

</script>

</html>